<template>
  <div class="msg-template">
    <tips :tips="tips"></tips>
    <el-table
      :data="tableData"
      :header-cell-style="headerCellStyle"
      style="width: 100%"
    >
      <el-table-column prop="tpl" label="短信模板"></el-table-column>
      <el-table-column
        :header-align="'right'"
        prop="content"
        label="模板内容"
        align="right"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import tips from "./tips.vue";
export default {
  name: "msgTemplate",
  components: {
    tips
  },
  props: {},
  data() {
    return {
      bodyStyle: {
        background: "#fffbf3",
        color: "#efb44a",
        padding: "0 30px",
        fontSize: "14px",
        borderRadius: "4px"
      },
      headerCellStyle: {
        background: "#f7f8fa",
        height: "40px"
      },
      tips: ["可用的短信模板为调用接口，暂不支持自行创建"],
      tableData: [
        {
          tpl: "注册/绑定验证码",
          content:
            "您的短信验证码为:[数字] 您正在使用短信验证码相关功能, 需要你进行身份确认【xxx】"
        },
        {
          tpl: "找回密码验证码",
          content:
            "您的短信验证码为: [数字] 您正在使用短信验证码相关功能, 需要你进行身份确认【xxx】"
        },
        { tpl: "用户过期提醒", content: "您的用户名[username]即将过期。" },
        {
          tpl: "平台到期提醒",
          content:
            "您的平台账号${name}即将过期,为了不影响正常使用，请及时续费。"
        },
        {
          tpl: "API余量提醒",
          content: "您的平台账号${name}剩余的API流量即将耗尽，请及时购买。"
        }
      ]
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.msg-template {
  .el-card {
    border: 1px solid #fec;
    margin-bottom: 30px;
    color: #efb44a;
    .card-item {
      line-height: 32px;
    }
  }
}

.el-select {
  margin-right: 30px;
}

.buy-sign-btn {
  float: right;
}
.msg-template-table {
  margin-bottom: 30px;
}
</style>
